import { memo, MouseEventHandler, useEffect, useRef } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { useNavigate } from 'react-router-dom';
import { Alert, Spin, Tag } from 'antd';
import { resGoods } from '@/services/goods';
import { useInfiniteScroll } from 'ahooks';
import QueueAnim from 'rc-queue-anim';
import NoMore from '@/components/NoMore';
import { useGoDetail } from '@/hooks/useGoDetail';
import { formatUrl } from '@/utils/format';

const GoodsItem: FC<
  PropsWithChildren<{ data: API.QueryGoods; onClick: MouseEventHandler }>
> = ({ data, onClick }) => {
  return (
    <div
      className={
        'flex bg-blue-50 rounded-lg overflow-hidden cursor-pointer hover:ring-1 hover:ring-offset-4 transition hover:shadow-lg'
      }
      onClick={onClick}
    >
      <img className={'w-24 h-32'} src={formatUrl(data.cover)} alt="" />
      <div className={'px-4 pb-2 pt-3 w-48 space-y-1.5'}>
        <div className={'text-lg truncate'}>{data.title}</div>
        <div className={'truncate-2 text-sm'}>{data.description}</div>
        <div className={'space-x-2'}>
          <strong className={'text-blue-600 text-lg'}>
            <em className={'text-xs px-0.5'}>￥</em>
            {data.price * data.discount}
          </strong>
          {data.discount < 1 ? (
            <i className={'line-through text-gray-600'}>
              <em className={'text-xs px-0.5'}>￥</em>
              {data.price}
            </i>
          ) : null}
        </div>
      </div>
    </div>
  );
};

const GoodsItemMemo = memo(GoodsItem);

const HomeRecommendGoods: FC<PropsWithChildren<{}>> = () => {
  const { goDetail: onClickHandler } = useGoDetail();
  const { data, loading, loadMore, loadingMore, noMore } =
    useInfiniteScroll<API.GoodsInfiniteData>(
      (currentData) => {
        return resGoods({
          limit: 18,
          offset: currentData ? currentData.offset + currentData.limit : 0,
          attributesToHighlight: ['*'],
          filter: ['is_recommend = 1', 'is_on = 1'],
          attributesToCrop: ['title', 'description', 'details'],
          sort: ['is_on:desc', 'is_recommend:desc', 'sales:desc'],
          cropLength: 5,
        }).then((value) => {
          let result: API.GoodsInfiniteData;
          let { hits, ...rest } = value;
          result = { ...rest, list: value.hits };
          return result;
        });
      },
      {
        target: document,
        isNoMore: (d) => {
          return (
            d?.list.length === 0 || !d || d?.list.length < d.offset + d.limit
          );
        },
      }
    );
  return (
    <div className={'mt-24 px-4 py-6 bg-white font-serif  rounded-lg'}>
      <div className={'text-center text-2xl  flex-justify-items-center'}>
        推荐商品<Tag color={'#60a5fa'}>猜你喜欢</Tag>
      </div>
      <div className={'py-8'}>
        <Spin spinning={loading} />
        <div
          className={
            'grid place-content-around grid-cols-3 place-items-center gap-y-8'
          }
        >
          {data && data.list.length > 0
            ? data.list
                .filter((value) => value.stock > 0)
                .map((value) => (
                  <GoodsItemMemo
                    key={value.id}
                    data={value}
                    onClick={onClickHandler(value.id)}
                  />
                ))
            : null}
        </div>
        <NoMore loadingMore={loadingMore} noMore={noMore} />
      </div>
    </div>
  );
};

export default memo(HomeRecommendGoods);
